<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <style type="text/css">
      .leftBlock  {
        border:  1px solid red ;
        width:  200px  ; height: 200px ;
        float: left ;
        padding: 0px ; margin: 0px auto ;
        position: relative ;
        top:0px;       
      }
      
      .rightBlock {
        border:  1px solid blue ;
        height: 900px ;
        padding: 0px ; margin: 0px ;
        margin-left: 200px ;
      }
    </style>
    <script language="javascript" src="../eXo.js"></script>
    <script language="javascript" src="../eXo/util/Util.js"></script>
    <script language="javascript" src="../eXo/webui/UIPopup.js"/></script>
    <script language="javascript" src="../eXo/webui/UIPopupMenu.js"></script>
    <script language="javascript" src="../eXo/webui/UIDialog.js"></script>
    <script language="javascript" src="../eXo/browser/Browser.js"></script>
    <script language="javascript" src="../eXo/dnd/DragDrop.js"></script>
  </head>
  <body onclick="eXo.webui.UIDialog.show('UIDialog')">
  <div onclick="eXo.webui.UIDialog.hide('UIDialog')" style="border: solid 1px blue;">click</div>
  <div id="container" style="border: solid 1px green; width: 1700px; height: 1000px; background: yellow;">
	  <div id="UIDialog" style="display: none; border: solid 1px red; width: 300px; height: 300px; position: absolute;">
	    Hello The World
	  </div>
  </div>

    
  </body>
</html>
<script language="javascript">
  eXo.webui.UIDialog.init('UIDialog', 'container');
  window.onload = initializationPopup ;
</script>
